<template>
    <div class="page animate__animated animate__fadeIn">
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px' }">
            <el-form size="small" :model="ruleForm" :rules="rules" label-width="120px" ref="ruleForm">
                <el-form-item label="所属公司" prop="companyName">
                    <el-input v-model="companyName" class="form-input" readonly></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入供应商名称" class="form-input"></el-input>
                </el-form-item>
                <el-form-item label="营业执照" prop="license">
                    <upload-single-img :imgUrl="ruleForm.license" @handleSuccess="handleSuccess" @removeImg="removeImg"></upload-single-img>
                    <!-- <upload-single-img ></upload-single-img> -->
                </el-form-item>
                <el-form-item label="联系人" prop="contact">
                    <el-input v-model="ruleForm.contact" placeholder="请输入供应商联系人" class="form-input"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input type="tel" v-model="ruleForm.phone" placeholder="请输入供应商联系方式" class="form-input"></el-input>
                    <div class="toolTip">此号码用于接收短信通知</div>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input type="tel" v-model="ruleForm.address" placeholder="请输入供应商地址" class="form-input"></el-input>
                </el-form-item>
                <el-form-item label="业务辐射范围" prop="business_scope">
                    <el-input v-model="ruleForm.business_scope" placeholder="请输入业务辐射范围"></el-input>
                </el-form-item>
                <el-form-item label="体系认证" prop="qualifications">
                    <el-checkbox-group v-model="ruleForm.qualifications">
                        <el-checkbox v-for="(item, index) in qualifiyObj.qualifiyList" :label="item" :key="index">{{
                            item
                        }}</el-checkbox>
                    </el-checkbox-group>
                    <el-tag :key="tag" v-for="tag in ruleForm.qualifications_others" closable
                        :disable-transitions="false" @close="handleQualifiyClose(tag)">
                        {{ tag }}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="qualifiyObj.inputVisible" v-model="qualifiyObj.inputValue"
                        ref="saveTagInput" size="small" @keyup.enter.native="handleQualifiyConfirm"
                        @blur="handleQualifiyConfirm">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showQualifiyInput"
                        icon="el-icon-plus">其他</el-button>
                </el-form-item>
                <el-form-item label="荣誉证书" prop="honor_cert">
                    <upload-multiple-image @imageHandle="getImages" :imgList="honorImg"></upload-multiple-image>
                </el-form-item>
                <el-form-item label="实验室设备" prop="lab_equipment">
                    <el-checkbox-group v-model="ruleForm.lab_equipment">
                        <el-checkbox v-for="(item, index) in labObj.labEquipmentList" :label="item" :key="index">{{ item
                            }}</el-checkbox>
                    </el-checkbox-group>
                    <el-tag :key="tag" v-for="tag in ruleForm.lab_equipment_others" closable
                        :disable-transitions="false" @close="handleLabClose(tag)">
                        {{ tag }}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="labObj.inputVisible" v-model="labObj.inputValue"
                        ref="saveLabInput" size="small" @keyup.enter.native="handleLabConfirm" @blur="handleLabConfirm">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showLabInput"
                        icon="el-icon-plus">其他</el-button>
                </el-form-item>
                <el-form-item label="专业检测员" prop="inspector">
                    <el-input v-model="ruleForm.inspector" placeholder="请输入专业检测员数量">
                        <template slot="append">位</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="冷链车数量" prop="cold_chain_nums">
                    <el-input v-model="ruleForm.cold_chain_nums" placeholder="请输入冷链车数量">
                        <template slot="append">辆</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="冷库体积" prop="cold_storage_volume">
                    <el-input v-model="ruleForm.cold_storage_volume" placeholder="请输入冷库体积">
                        <template slot="append">平方</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="分拣场地面积" prop="space">
                    <el-input v-model="ruleForm.space" placeholder="请输入分拣场地面积">
                        <template slot="append">平方</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="食安险金额" prop="coverage_amount">
                    <el-input v-model="ruleForm.coverage_amount" placeholder="请输入食安险金额">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="虫控" prop="insect_control">
                    <el-radio-group v-model="ruleForm.insect_control">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSubmit('ruleForm')" :disabled="isDisabled" :loading="isLoading">确
                        定</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import uploadSingleImg from '../../components/uploadSingleImg.vue';
import uploadMultipleImage from "@/components/uploadMultipleImage.vue";
import { adminInfo, saveSupply } from '../../api/login';
export default {
    components: { uploadSingleImg,uploadMultipleImage },
    data() {
        return {
            ruleForm: {
                // supply_id: '',
                name: "",
                contact: "",
                phone: "",
                address: "",
                license: '',

                registered_capital: '',
                business_scope: '',
                qualifications: [],
                qualifications_others: [],
                honor_cert: [],
                lab_equipment: [],
                lab_equipment_others: [],
                inspector: '',
                cold_chain_nums: '',
                cold_storage_volume: '',
                space: '',
                coverage_amount: '',
                insect_control: 0,
            },
            qualifiyObj: {
                qualifiyList: ["@IS09001", "@IS045001", "@IS022000", "@IS014000", "@HAOCP"],
                inputVisible: false,
                inputValue: '',
            },
            labObj: {
                labEquipmentList: ["农残检测仪", "期肉精检测仪", "金检测仪兽药检测仪", "体金读数仪", "振荡器", "水浴锅", "高温培养箱", "搅拌器", "电子天平", "肉类水分检测仪"],
                inputVisible: false,
                inputValue: '',
            },
            honorImg:[],
            companyName: '',
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入供应商名称",
                        trigger: "blur",
                    },
                ],
                contact: [
                    {
                        required: true,
                        message: "请输入联系人",
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入联系方式",
                        trigger: "blur",
                    },
                    {
                        pattern: /^1[3456789]\d{9}$/,
                        message: "请输入正确的手机号",
                        trigger: "blur",
                    },
                ],
                address: [
                    {
                        required: true,
                        message: "请输入供应商地址",
                        trigger: "blur",
                    },
                ],
                account: [
                    {
                        required: true,
                        message: "请输入管理员账号",
                        trigger: "blur",
                    },
                ],
                license: [
                    {
                        required: true,
                        message: "请上传营业执照",
                        trigger: "change",
                    },
                ]
            },
            isDisabled: false,
            isLoading: false,
        }
    },
    created() {
        this.getAdminInfo()
    },
    methods: {
        getAdminInfo() {
            adminInfo().then(res => {
                if (res.code == 0) {
                    // this.ruleForm.name = res.data.name;
                    // this.ruleForm.contact = res.data.contact;
                    // this.ruleForm.phone = res.data.phone;
                    // this.ruleForm.address = res.data.address;
                    // this.ruleForm.account = res.data.account;
                    // this.ruleForm.license = res.data.license;
                    // this.companyName = res.data.company.name;

                    res.data.market_id = res.data.market_id == 0 ? '' : res.data.market_id;
                    res.data.lab_equipment = res.data.lab_equipment ? res.data.lab_equipment.split(',') : []
                    res.data.qualifications = res.data.qualifications ? res.data.qualifications.split(',') : []
                    for (let i = 0; i < res.data.honor_cert.length; i++) {
                        const obj = {
                            url: res.data.honor_cert[i]
                        }
                        this.honorImg.push(obj)
                    }
                    this.ruleForm = res.data;
                    this.companyName = res.data.company.name;
                }
            })
        },
        handleQualifiyClose(tag) {
            this.ruleForm.qualifications_others.splice(this.ruleForm.qualifications_others.indexOf(tag), 1);
        },
        handleLabClose(tag) {
            this.ruleForm.lab_equipment_others.splice(this.ruleForm.lab_equipment_others.indexOf(tag), 1);
        },
        showQualifiyInput() {
            this.qualifiyObj.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        showLabInput() {
            this.labObj.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveLabInput.$refs.input.focus();
            });
        },
        handleQualifiyConfirm() {
            let inputValue = this.qualifiyObj.inputValue;
            if (inputValue) {
                this.ruleForm.qualifications_others.push(inputValue);
            }
            this.qualifiyObj.inputVisible = false;
            this.qualifiyObj.inputValue = '';
        },
        handleLabConfirm() {
            let inputValue = this.labObj.inputValue;
            if (inputValue) {
                this.ruleForm.lab_equipment_others.push(inputValue);
            }
            this.labObj.inputVisible = false;
            this.labObj.inputValue = '';
        },
        getImages(arr) {
            this.ruleForm.honor_cert = arr;
            this.honorImg = arr
        },
        handleSuccess(e) {
            this.ruleForm.license = e;
        },
        removeImg(type) {
            this.ruleForm.license = '';
        },
        async onSubmit(formName) {
            this.isDisabled = true;
            this.isLoading = true;
            let res = await this.$getCsrToken();
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (res.code == 0) {
                        saveSupply(this.ruleForm).then((res) => {
                            if (res.code == 0) {
                                this.isDisabled = false;
                                this.isLoading = false;
                                this.$message({
                                    message: res.msg,
                                    type: "success",
                                });
                                this.clear();
                                this.close();
                                this.$emit("reload");
                            } else {
                                this.isDisabled = false;
                                this.isLoading = false;
                            }
                        });
                    }
                } else {
                    this.isDisabled = false;
                    this.isLoading = false;
                    return false;
                }
            });
        },
    }
}
</script>
<style scoped>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    /* margin-left: 10px; */
    /* height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0; */
}

.input-new-tag {
    width: 120px;
    /* margin-left: 10px; */
    vertical-align: bottom;
}
</style>